<template>
    <van-tabs v-model:active="active">
        <van-tab title=" 首页">
            <van-search v-model="value" placeholder="请输入搜索关键词" />
            <img src="../../images/5.png" alt="" style="width: 100%;">
            <van-grid>
                <van-grid-item icon="points" text="小米上新" />
                <van-grid-item icon="qr" text="小米发布" />
                <van-grid-item icon="apps-o" text="小米直播" />
                <van-grid-item icon="apps-o" text="小米直播" />
            </van-grid>
            <van-grid>
                <van-grid-item icon="points" text="智能穿戴" />
                <van-grid-item icon="qr" text="手机" />
                <van-grid-item icon="apps-o" text="电视" />
                <van-grid-item icon="apps-o" text="电视" />

            </van-grid>
        </van-tab>
        <van-tab title="国补">
            <van-pull-refresh v-model="loading" @refresh="onRefresh">


            <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="item in searchApiData">
                    <router-link :to="'/xq/'+item.goods_id">

                    
                    <van-image :src="item.goods_big_logo?item.goods_big_logo:'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                    <p>{{ item.goods_name }}</p>
                </router-link>
                </van-grid-item>
            </van-grid>
</van-pull-refresh>
        </van-tab>
    </van-tabs>
</template>


<script setup>
import { ref } from 'vue';
import { searchApi } from '@/api/app';
const searchApiData = ref([])
import { showToast } from 'vant';
 const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };

searchApi().then(res => {
    console.log('列表', res);
    searchApiData.value = res.data.message.goods
})
</script>

<style lang="scss" scoped></style>